<template>
  
    <div>
        <p>KeepAlive:</p>
        <button @click="changeState('A')">A</button>
        <button @click="changeState('B')">B</button>
        <button @click="changeState('C')">C</button>

        <!-- 切换的时候组件都会销毁重置 -->

        <!-- <KeepAliveStageA v-if="state==='A'" />
        <KeepAliveStageB v-if="state==='B'" />
        <KeepAliveStageC v-if="state==='C'" /> -->

        <!-- 缓存组件,提高性能,和v-show不同.v-show控制display来切换,keepAlive是在vue层级JS对象的渲染-->
        <!-- 例如tab组件切换,简单的场景可以使用v-show -->
        <keep-alive>
            <KeepAliveStageA v-if="state==='A'" />
            <KeepAliveStageB v-if="state==='B'" />
            <KeepAliveStageC v-if="state==='C'" />            
        </keep-alive>
    </div>
</template>

<script>
import KeepAliveStageA from './KeepAliveStateA'
import KeepAliveStageB from './KeepAliveStateB'
import KeepAliveStageC from './KeepAliveStateC'

export default {
    components:{
        KeepAliveStageA,
        KeepAliveStageB,
        KeepAliveStageC
    },
    data() {
        return {
            state:'A'
        }
    },
    methods: {
        changeState(state){
            this.state=state
        }
    },
}
</script>